<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Tool')"></h3>
    </template>
    
    <el-row :gutter="8">
      <!-- 第一行按钮 -->
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.showPluginLibrary"
                   :disabled="!toolStore.isPluginLibraryEnabled" 
                   style="width: 100%;">
          {{ t('Plugin library') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.showConfigEditor"
                   :disabled="!toolStore.isConfigEditorEnabled" 
                   style="width: 100%;">
          {{ t('Config editor') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.showGlobalValues"
                   :disabled="!toolStore.isGlobalValuesEnabled" 
                   style="width: 100%;">
          {{ t('Global values') }}
        </el-button>
      </el-col>
    </el-row>
    
    <el-row :gutter="8" style="margin-top: 8px;">
      <!-- 第二行按钮 -->
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.configBusProtocol"
                   :disabled="!toolStore.isConfigBusProtocolEnabled" 
                   style="width: 100%;">
          {{ t('Config bus protocol') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.updateLicense"
                   :disabled="!toolStore.isUpdateLicenseEnabled" 
                   style="width: 100%;">
          {{ t('Update license') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.configGlobalPath"
                   :disabled="!toolStore.isConfigGlobalPathEnabled" 
                   style="width: 100%;">
          {{ t('Config global path') }}
        </el-button>
      </el-col>
    </el-row>
    
    <el-row :gutter="8" style="margin-top: 8px;">
      <!-- 第三行按钮 -->
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.showVersions" 
                   style="width: 100%;">
          {{ t('Version info') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.showLicenseInfo" 
                   style="width: 100%;">
          {{ t('License info') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="toolStore.showGpuDecoderInfo" 
                   style="width: 100%;">
          {{ t('GPU decoder info') }}
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { onMounted } from 'vue'
import { useToolPanelStore } from '@/stores/toolPanel'
import { useLanguageStore } from '@/stores/language'

const toolStore = useToolPanelStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Tool': {
      'en': 'Tool',
      'zh': '工具'
    },
    'Plugin library': {
      'en': 'Plugin library',
      'zh': '插件库'
    },
    'Config editor': {
      'en': 'Config editor',
      'zh': '配置编辑器'
    },
    'Global values': {
      'en': 'Global values',
      'zh': '全局值一览'
    },
    'Config bus protocol': {
      'en': 'Config bus protocol',
      'zh': '配置总线协议'
    },
    'Update license': {
      'en': 'Update license',
      'zh': '更新许可证'
    },
    'Config global path': {
      'en': 'Config global path',
      'zh': '配置全局路径'
    },
    'Version info': {
      'en': 'Version info',
      'zh': '版本信息'
    },
    'License info': {
      'en': 'License info',
      'zh': '许可证信息'
    },
    'GPU decoder info': {
      'en': 'GPU decoder info',
      'zh': 'GPU解码器信息'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

onMounted(() => {
  toolStore.initializeToolPanel()
})
</script> 